<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="商品类型" name="first">
        <types></types>
      </el-tab-pane>
      <el-tab-pane label="商品分类" name="second">
        <classify></classify>
      </el-tab-pane>
      <el-tab-pane label="商品价格" name="third">
        <specs></specs>
      </el-tab-pane>
    </el-tabs>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import types from './modules/type.vue'
  import classify from './modules/classify.vue'
  import specs from './modules/specs.vue'
  
  const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  </script>
  <style lang="scss" scoped>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>